<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
			::-webkit-scrollbar {
				width: 5px;
				height: 5px;
				background-color: #F5F5F5;
			}

			/*定义滚动条轨道 内阴影+圆角*/
			::-webkit-scrollbar-track {
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				background-color: #F5F5F5;
			}

			/*定义滑块 内阴影+圆角*/
			::-webkit-scrollbar-thumb {
				border-radius: 10px;
				box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
				/*滚动条的颜色*/
				background-color: #00BFFF;
			}





			html,
			body {
				width: 100%;
				height:100%;
			}

			* {
				padding: 0;
				margin: 0;
			}

			.preview_main_page {
				display: flex;
				width: 100%;
				height: 100%;
				flex:auto;
				flex-direction: column;
			}

			/*场景部分*/
			.preview_main_page_center {
				height:100%;
				flex-grow: 1;
				display: flex;
				flex:auto;
				/*	justify-content:safe center;
				align-items: center;*/
				/* overflow: auto; */
			}

			.layui-input-inline {
				display: inline-block !important;
				width: 248px !important;
			}
			
	        .layui-input {
				padding-left: 4px !important;
			}
		</style>
		<!--layui框架-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css">
		<script src="js/plugIn/jquery/jquery.min.js"></script>
		<!--jquery 要在layui之前，这样layui就不会加载内部的jquery-->
		<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
		<!--原layui不支持多选下拉，所以引入layui多选下拉框 -->
		<script src="js/plugIn/xm-select.js"></script>

		<script src="js/common/tool.js"></script>
	</head>
	<body>
		<div class="preview_main_page">
			<div class="preview_main_page_center">
				<form class="layui-form" action="" style="width: 100%;margin: 20px;" id="valueform"
					lay-filter="valueform">
					<!-- 单选 -->
					<div class="layui-form-item" id="areaItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">查看范围：</label>
							<div class="layui-input-inline">
								<select name="area_select" lay-filter="area_select" id="areaSelect">
									<option selected value="select">手动选择</option>
									<option value="all">全部设备</option>
								</select>
							</div>
						</div>
					</div>
					<!-- 单选设备 -->
					<div class="layui-form-item" id="deviceItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">设备名称：</label>
							<div class="layui-input-inline">
								<select name="device_select" lay-filter="device_select" lay-search id="deviceSelect">
								</select>
							</div>
						</div>
					</div>
					<!-- 多选设备 -->
					<div class="layui-form-item" id="deviceManyItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">设备名称：</label>
							<div class="layui-input-inline" id="deviceManySelect">
							</div>
						</div>
					</div>
					<!-- 单选  公用-->
					<div class="layui-form-item" id="timeItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">时间段：</label>
							<div class="layui-input-inline">
								<select name="time_select" lay-filter="time_select" id="timeSelect">
									<option selected value="1">今日</option>
									<option value="2">昨日</option>
									<option value="3">最近三天</option>
									<option value="7">最近一周</option>
									<option value="10">最近十天</option>
									<option value="15">最近半月</option>
									<option value="30">最近一月</option>
									<option value="last">上一自然月</option>
								</select>
							</div>
						</div>
					</div>
					<!-- 报表选择 -->
					<div class="layui-form-item" id="tableItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">报表名称：</label>
							<div class="layui-input-inline">
								<select name="table_select" lay-filter="table_select" id="tableSelect">
								</select>
							</div>
						</div>
					</div>
					<!-- 报表类型 --> 
					<div class="layui-form-item" id="typeItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">报表类型：</label>
							<div class="layui-input-inline">
								<select name="type_select" lay-filter="type_select" id="typeSelect">
									<option selected value="1">日报</option>
									<option  value="3">月报</option>
									<option value="4">年报</option>
								</select>
							</div>
						</div>
					</div> 
					<!-- 单选  数据报表 日报时间-->
					<div class="layui-form-item" id="dayItem" style="display:none;">
						<div class="layui-inline">
							<label class="layui-form-label">日期：</label>
							<div class="layui-input-inline">
								<select name="day_select" lay-filter="day_select" id="daySelect">
									<option selected value="0">今日</option>
									<option value="1">昨日</option>
									<option value="2">前天</option>
								</select>
							</div>
						</div>
					</div>
					<!-- 单选  数据报表  月报时间-->
					<div class="layui-form-item" id="monthItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">月份：</label>
							<div class="layui-input-inline">
								<select name="month_select" lay-filter="month_select" id="monthSelect">
									<option selected value="0">本月</option>
									<option value="1">上月</option>
									<option value="2">上上月</option>
									
								</select>
							</div>
						</div>
					</div>
					<!-- 单选  数据报表  年报时间-->
					<div class="layui-form-item" id="yearItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">年份：</label>
							<div class="layui-input-inline">
								<select name="year_select" lay-filter="year_select" id="yearSelect">
									<option selected value="0">今年</option>
									<option value="1">去年</option>
									<option value="2">前年</option>
								</select>
							</div>
						</div>
					</div>
					
					<!-- 单选 -->
					<div class="layui-form-item" id="deviceListItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">设备来源：</label>
							<div class="layui-input-inline">
								<select name="deviceList_select" lay-filter="deviceList_select" id="deviceListSelect">
									<option selected value="option">当前项目</option>
									<option value="platform">平台全部</option>
								</select>
							</div>
						</div>
					</div>
					<!-- 多选 -->
					<div class="layui-form-item" id="fieldItem" style="display: none;">
						<div class="layui-inline">
							<label class="layui-form-label">字段选择：</label>
							<div class="layui-input-inline" id="fieldSelect">
							</div>
						</div>
					</div>
					<!-- 单选 -->
					<div class="layui-form-item" style="margin-top:-15px;" id="showSelect">
						<div class="layui-inline" >
							<label class="layui-form-label"></label>
							<div class="layui-input-inline" id="lockSet">
								<!-- <input type="radio" name="lockSet"  value="show" hidden title=""> -->
								<input type="radio" name="lockSet" lay-filter="lockSet" value="hidden"  title="在监控中隐藏选择和操作">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"></label>
						<div class="layui-inline">
							<div class="layui-input-inline" style='width:70px'>
								<!-- <input type="button" style = 'display:none'   id="uploadButton" class="layui-btn layui-btn-normal" value="确认修改"/> -->
								<input type="button" id="uploadButton" onclick="sureClick()" class="layui-btn layui-btn-normal"
									style="width:94px;" value="确认" />
							</div>
						</div>
					</div>
				</form>
			</div>
        </div>
		</div>
	</body>
	<script>
		var baseURL = localStorage.getItem("baseURL");
		var optionId = Number(localStorage.getItem("optionId"));
		//获取图纸原信息并显示
		var index = parent.layer.getFrameIndex(window.name);
		var form=layui.form;
		var viewDataType = $_GET.viewDataType;
		var defaultArgments =sessionStorage.getItem("defaultArgments")?JSON.parse(sessionStorage.getItem("defaultArgments")):null;
		//console.log(viewDataType);
		//console.log(defaultArgments);
		sessionStorage.removeItem("defaultArgments");
        var choose_all=[{
			value: 0,
			name:"全部",
			selected:true
		}];
		var devices=[];   //项目下的所有设备
	    var tables=[];
		var deviceManySelect = null; //设备多选下拉对象
	    var fieldSelect = null;      //设备列表字段下拉对象
		var fields=[
			{name: "设备ID", value: "id",selected:false,minWidth:50},
			{name: "项目ID", value: "product_id",selected:false,minWidth:50},
			{name: "项目名称", value: "product_name",selected:false,minWidth:160},
			{name: "设备名称", value: "equip_name",selected: true,minWidth:160},
			{name: "SN码", value: "equip_code",selected: true,minWidth:160},
			{name: "型号", value: "equip_model",selected:false,minWidth:120},
		    {name: "物联卡ICCID", value: "ccid_code",selected:true,minWidth:170},
			{name: "设备IMEI", value: "imie_code",selected:false,minWidth:170},
			{name: "缩略图",value: "thumb",selected:false,minWidth:80},
			{name: "位置", value: "geo_name",selected:true,minWidth:250},
			{name: "坐标", value: "geo_coord",selected:false,minWidth:130},
			{name: "设备类型", value: "type",selected:false,minWidth:80},
			{name: "运行模式", value: "run_mode",selected:false,minWidth:60},
			{name: "联网方式", value: "network_way",selected:false,minWidth:60},
			{name: "应用场景", value: "app_scene",selected:false,minWidth:80},
			{name: "上报频率", value: "report_interval",selected:false,minWidth:60},
			{name: "是否在线", value: "is_on",selected:true,minWidth:100},
			{name: "是否报警", value: "is_alarm",selected:true,minWidth:100},
			{name: "启用状态", value: "equip_state",selected:true,minWidth:100},
			{name: "固件版本", value: "firmware_version",selected:false,minWidth:60},
			{name: "上线时间", value: "last_con_time",selected:false,minWidth:150},
			{name: "上报时间", value: "last_data_time",selected:false,minWidth:150},
			{name: "添加时间", value: "add_time",selected:false,minWidth:150}
		];
			
		//获取所有设备
	    function getEquip() {
			this.devices = [];
	        $.ajax({
				type: "POST",
				traditional: true,
				url:baseURL+'api/equip/all',
				data:{
					"product_id":optionId,
					"run_mode": 1,
					"user_id": localStorage.getItem("at_userId"),
					"token":localStorage.getItem("attoken")
				},
				cache: false,
				async:false, 
				beforeSend: function() {
				//请求前要处理的事情
				},
				success: function (data) {
					if(data && data.result=='success'){
						if (data.data.length) {
							for (let i = 0, len = data.data.length; i < len; i++) {
								let device = {
									value: data.data[i].id,
									name: data.data[i].equip_name,
									type: data.data[i].type,
									selected:i==0?true:false,
									//groupsCount: data.data[i].groups_count
									//disabled:res.data.data[i].slaves_count?false:true
								}
								devices.push(device);
							}
							if(defaultArgments && defaultArgments.lookArea=="select"){
								for(let i=0,len=devices.length;i<len;i++){
									//必须现将所有选项去掉选中
									devices[i].selected = false;
									for(let n=0,len2=defaultArgments.equip_id.length;n<len2;n++){
										if(devices[i].value==defaultArgments.equip_id[n]){
											devices[i].selected=true;
										}
									}
								}
							}
						} 
					}else{ 
					   alert(data.msg);
			        } 
			    },
				error: function (e) {
					   layer.msg('请求失败', {
						   offset: 't',
						   anim: 6,
						   icon:2
					   });
				}
			});
	    
	    };
			
	    function getAnalysisTable() {
			this.tables = [];
			$.ajax({
				type: 'POST',
				url: baseURL+'api/statement/all',
				traditional: true,
				data: {
					"project_id": optionId,
					"token":localStorage.getItem("attoken")
					
				},
				cache: false,
				async:false, 
				beforeSend: function() {
				//请求前要处理的事情
				},
				success: function (data) {
					if(data && data.result=='success'){
						if (data.data.length) {
							for (let i = 0, len = data.data.length; i < len; i++) {
								let table = {
									value: data.data[i].id,
									name: data.data[i].title,
									selected:i==0?true:false,
								}
								tables.push(table);
							}
							
						}
					    
					}
					
				},
				error: function (e) {
				   layer.msg('请求失败', {
					   offset: 't',
					   anim: 6,
					   icon:2
				   });
				}
			
			});
		};
			
	    //渲染多选设备下拉框
		function renderManyDeviceSelect(){
			if(defaultArgments){
				$("#areaSelect").val(defaultArgments.lookArea);
				if(defaultArgments.lookArea=="all"){
					deviceManySelect = xmSelect.render({
						el: '#deviceManySelect',
						data:choose_all,
						disabled:true
					})
				}else{
					deviceManySelect = xmSelect.render({
						el: '#deviceManySelect',
						data: devices,
						model: {
							label: {
								type: 'block',
								block: {
									//最大显示数量, 0:不限制
									showCount: 1,
									//是否显示删除图标
									showIcon: true,
								}
							}
						},
						disabled:false
					})
				}
			}else{
				if(viewDataType=="data"){
					deviceManySelect = xmSelect.render({
						el: '#deviceManySelect',
						data: devices,
						model: {
								label: {
									type: 'block',
									block: {
										//最大显示数量, 0:不限制
										showCount: 1,
										//是否显示删除图标
										showIcon: true,
									}
								}
						}
					})
				}else if(viewDataType=="alarm" || viewDataType=="log"){
					$("#areaSelect").val("all");
					deviceManySelect = xmSelect.render({
						el: '#deviceManySelect',
						data:choose_all,
						disabled:true
					})
				}
			}
			form.on('select(area_select)',function(data){
				if(data.value=='all'){
					layui.use('form',function(){
						deviceManySelect = xmSelect.render({
							el: '#deviceManySelect',
							data:choose_all,
							disabled:true
						})
					})
				}else{
					deviceManySelect = xmSelect.render({
						el: '#deviceManySelect',
						data: devices,
						model: {
								label: {
									type: 'block',
									block: {
										//最大显示数量, 0:不限制
										showCount: 1,
										//是否显示删除图标
										showIcon: true,
									}
								}
						},
						disabled:false
					})
				}
			});
			form.render("select");
		};
		
		//单选设备下拉框渲染
		function renderDevice(){
			var that=this;
			var htmlDeviceStr="";
			if(defaultArgments){
				for(let i=0,len=devices.length;i<len;i++){
					if(devices[i].value==defaultArgments.equip_id){
					   htmlDeviceStr += "<option value="+devices[i].value+" selected>"+devices[i].name+"</option>";
					}else{
					   htmlDeviceStr += "<option value="+devices[i].value+">"+devices[i].name+"</option>";
					}
				}
			}else{
				htmlDeviceStr="<option value="+devices[0].value+" selected>"+devices[0].name+"</option>";
				for(let i=1,len=devices.length;i<len;i++){
					htmlDeviceStr += "<option value="+devices[i].value+">"+devices[i].name+"</option>";
				}
				
			}
			$("#deviceSelect").html(htmlDeviceStr);
			form.on('select(device_select)', function(data){
				defaultArgments = null;
			})
			form.render("select");
		};
		
		//表格名称下拉框渲染
		function renderTable(){
			var that=this;
			var tableStr="";
			console.log(tables);
			if(defaultArgments && defaultArgments.table_id){
				for(let i=0,len=tables.length;i<len;i++){
					if(tables[i].value==defaultArgments.table_id){
					   tableStr += "<option value="+tables[i].value+" selected>"+tables[i].name+"</option>";
					}else{
					   tableStr += "<option value="+tables[i].value+">"+tables[i].name+"</option>";
					}
				}
			}else{
				tableStr="<option value="+tables[0].value+" selected>"+tables[0].name+"</option>";
				for(let i=1,len=tables.length;i<len;i++){
					tableStr += "<option value="+tables[i].value+">"+tables[i].name+"</option>";
				}
			}
			$("#tableSelect").html(tableStr);
			form.on('select(table_select)',function(data){
				defaultArgments = null;
			})
			form.render("select");
		};
		
		//渲染设备列表字段多选下拉框
		function renderManyField(){
			let newFields=Array.from(fields);
			if(defaultArgments && defaultArgments.fields){
				//console.log(defaultArgments.fields);
			    let valFields = JSON.parse(defaultArgments.fields);
				for(let m=0,len=newFields.length;m<len;m++){
					//必须先将所有设为非选中状态
					newFields[m].selected=false;
				    for(let i=0,len2=valFields.length;i<len2;i++){
						if(newFields[m].value==valFields[i].value){
							newFields[m].selected = true;
						}
					}
				}
				fieldSelect = xmSelect.render({
					el: '#fieldSelect',
					data:newFields,
					model: {
							label: {
								type: 'block',
								block: {
									//最大显示数量, 0:不限制
									showCount: 1,
									//是否显示删除图标
									showIcon: true,
								}
							}
					}
				})
			}else{
				fieldSelect = xmSelect.render({
					el: '#fieldSelect',
					data: fields,
					model: {
							label: {
								type: 'block',
								block: {
									//最大显示数量, 0:不限制
									showCount: 1,
									//是否显示删除图标
									showIcon: true,
								}
							}
					}
				})
			}
		};
		
		function initFormData(){
			if(viewDataType!="device"){
			    this.getEquip();
				this.getAnalysisTable();
			}
			if(defaultArgments && defaultArgments.isLock && defaultArgments.isLock=="hidden"){
				//$("input[value='hidden']").attr("checked","checked");
				form.val("valueform",{
					"lockSet":"hidden"
				});
				form.render("radio");
			}
			form.on("radio(lockSet)",function(data){
				if($(this).attr("checked")){
					$(this).removeAttr("checked");
					form.render("radio");
				}else{
					$(this).attr("checked","true");
					form.render("radio");
				}
			})
			switch(viewDataType){
				case 'data':
				    $("#areaItem").css("display","block");
					$("#deviceManyItem").css("display","block");
					this.renderManyDeviceSelect();
					break;
				case 'historyData':
				case 'historyTable':
				case 'historyChart':
					$("#deviceItem").css("display","block");
					$("#timeItem").css("display","block");
					if(defaultArgments){
						$("#timeSelect").val(defaultArgments.date_range)
					}
					this.renderDevice();
					break;
				case 'analysis':
				    $("#tableItem").css("display","block");
					$("#typeItem").css("display","block");
					$("#dayItem").css("display","block");
					form.on("select(type_select)",function(data){
						//console.log(data.value);
						if(data.value=='1'){
							$("#dayItem").css("display","block");
							$("#monthItem").css("display","none");
							$("#yearItem").css("display","none");
							
						}else if(data.value=='3'){
							$("#dayItem").css("display","none");
							$("#monthItem").css("display","block");
							$("#yearItem").css("display","none");
							
						}else if(data.value=="4"){
							$("#dayItem").css("display","none");
							$("#monthItem").css("display","none");
							$("#yearItem").css("display","block");
						}
					})
					if(defaultArgments){
						$("#tableSelect").val(defaultArgments.table_id);
						$("#typeSelect").val(defaultArgments.type);
						if(defaultArgments.type=='1'){
							$("#dayItem").css("display","block");
							$("#monthItem").css("display","none");
							$("#yearItem").css("display","none");
							$("#daySelect").val(defaultArgments.date);
						}else if(defaultArgments.type=='3'){
							$("#dayItem").css("display","none");
							$("#monthItem").css("display","block");
							$("#yearItem").css("display","none");
							$("#monthSelect").val(defaultArgments.date);
						}else if(defaultArgments.type=="4"){
							$("#dayItem").css("display","none");
							$("#monthItem").css("display","none");
							$("#yearItem").css("display","block");
							$("#yearSelect").val(defaultArgments.date);
						}
					}
					this.renderTable();
					break;
				case 'alarm':
				case 'log':
				    $("#areaItem").css("display","block");
					$("#deviceManyItem").css("display","block");
					$("#timeItem").css("display","block");
					if(defaultArgments){
						$("#timeSelect").val(defaultArgments.date_range)
					}
					this.renderManyDeviceSelect();
					break;
				case 'device':
				    $("#deviceListItem").css("display","block");
				    $("#fieldItem").css("display","block");
					if(defaultArgments){
						$("#deviceListSelect").val(defaultArgments.equipArea);
						//console.log(defaultArgments.equipArea);
					}
					this.renderManyField();
					form.render("select");
					break;		
			}
		};
		
		//确认时的获取所有默认值
		function getDefault(){
			var defaultArg={};
			switch(viewDataType){
				case 'data':
					let equipDefaultData=deviceManySelect.getValue();
				    let equipIdsData=[];
					for(let i=0,len=equipDefaultData.length;i<len;i++){
						equipIdsData.push(equipDefaultData[i].value);
					}
				    defaultArg={
						"view_type":"data",
						"isLock":$("input[name='lockSet']:checked").val() || "show",
						"lookArea":$("#areaSelect").val(),
						"equip_id":equipIdsData
					};
				    break;
				case 'historyData':
				case 'historyTable':
				case 'historyChart':
				    let equipId=$("#deviceSelect").val();
					let deviceType = 1;
					//let groupsCount=0;
					for(let n=0,len=devices.length;n<len;n++){
						if(devices[n].value==equipId){
							deviceType = devices[n].type;
							//groupsCount= devices[n].groupsCount;
							break;
						}
					}
					
					defaultArg={
						"view_type":viewDataType,
						"isLock":$("input[name='lockSet']:checked").val() || "show",
						"equip_id":equipId,
						"type":deviceType,
						"date_range":$("#timeSelect").val()
					};
					break;
				case 'analysis':
				    defaultArg={
						"view_type":"analysis",
						"isLock":$("input[name='lockSet']:checked").val() || "show",
						"table_id":$("#tableSelect").val() || 0,
						"type": $("#typeSelect").val() || 1,
						"date":$("#typeSelect").val()=="1"?$("#daySelect").val():($("#typeSelect").val()=="3"?$("#monthSelect").val():$("#yearSelect").val()),
						
					};
					break;
				case 'alarm':
				case 'log':
				    let equipDefault=null;
				    let equipIds = 0;  //0表示全部
				    if($("#areaSelect").val()=="select"){
						equipDefault=deviceManySelect.getValue();
						equipIds=[];
						for(let i=0,len=equipDefault.length;i<len;i++){
							equipIds.push(equipDefault[i].value);
						}
					}
				    defaultArg={
						"view_type":viewDataType,
						"isLock":$("input[name='lockSet']:checked").val() || "show",
						"lookArea":$("#areaSelect").val(),
				    	"equip_id":equipIds==0?[]:equipIds,
						"date_range":$("#timeSelect").val()
				    };
					break;
				case 'device':
				    let fieldDefault = fieldSelect.getValue();
					let fields=[];
					//console.table(fieldDefault);
					defaultArg={
						"view_type":viewDataType,
						"isLock":$("input[name='lockSet']:checked").val() || "show",
						"equipArea":$("#deviceListSelect").val(),
				    	"fields":JSON.stringify(fieldDefault)
					};
					break;					
			}
			//console.log(JSON.stringify(defaultArg));
			return   JSON.stringify(defaultArg);         
		};
             
		//点击确认按钮
		function sureClick() {
		    let defaultArg = this.getDefault();
			parent.argments=defaultArg;
            //parent.stageView.defaultArgments = defaultArg;
			parent.layer.close(index);
		};
		
		window.onload=function(){
			initFormData();
		}
	</script>
</html>
